<script setup>
import useTable from "@/utils/useTable";
import {http} from "@/api";
import { useStore } from "vuex";
import defaultAvatar from '@/assets/default_avatar.png'
import dayjs from "dayjs";
const store = useStore()

/**
 * 表格
 * @type {Ref<UnwrapRef<*[]>>}
 */
const {
  searchParams,
  pageNo,
  pageSize,
  total,
  changePage,
  changeSize,
  dataSource,
  search,
  reset,
  openAdd,
  openView,
  openEdit,
  openDelete
} = useTable({
  requestFn: http.collect,
  params: {
    user_id: store.getters.userInfo.id
  },
  format: (res) => {
    return res.map(el => {
      let user = el.user || {}
      if (user.type === 0) {
        user.typeName = '普通用户'
      } else if (user.type === 1) {
        user.typeName = '律师'
      } else if (user.type === 2) {
        user.typeName = '管理员'
      }
      let comments = (el.post.comments || []).map(el2 => {
        let user = el2.user || {}
        if (user.type === 0) {
          user.typeName = '普通用户'
        } else if (user.type === 1) {
          user.typeName = '律师'
        } else if (user.type === 2) {
          user.typeName = '管理员'
        }
        return {
          ...el2,
          create_time: el2.create_time ? dayjs(el2.create_time).format('YYYY-MM-DD HH:mm:ss') : undefined,
          user
        }
      })
      return {
        ...el,
        user,
        post: {
          ...el.post,
          content: (el.post.content || '').replace(/<[^>]+>/g,""),
          create_time: el.post.create_time ? dayjs(el.post.create_time).format('YYYY-MM-DD HH:mm:ss') : undefined,
        },
        comments,
        collects: el.post.collects || [],
        likes: el.post.likes || []
      }
    })
  },
})

</script>

<template>
  <div class="post">
    <div class="userCommunity-list">
      <div class="userCommunity-item" v-for="item in dataSource" :key="item.id">
        <div>
          <div style="margin-bottom: 10px" class="f-r a-c j-b">
            <div class="f-r a-c">
              <el-avatar size="60" :src="item.user.avatar || defaultAvatar"></el-avatar>
              <span class="user-name">{{ item.user.nickname }}【{{item.user.typeName}}】</span>
            </div>
            <div class="create-time">{{ item.post.create_time }}</div>
          </div>
          <div class="userCommunity-item-title">
            {{ item.name }}
          </div>
          <div class="userCommunity-item-desc">
            {{ item.post.content }}
          </div>
          <el-image v-if="item.post.image" class="userCommunity-item-img" :src="item.post.image" :preview-src-list="[item.post.image]">
          </el-image>
        </div>
        <div class="userCommunity-item-comment f-c j-c a-c">
          <div class="share-list f-r a-c j-c">
            <div class="share-item f-r a-c" >
              <img class="share-icon" src="@/assets/comment_light.png" alt="" />
              <span class="share-name" >
            {{ item.comments.length }}
          </span>
            </div>
            <div class="share-item f-r a-c" >
              <img class="share-icon" src="../../assets/zan_blue.png" alt="" />
              <span class="share-name" >
            {{ item.collects.find(el => el.user_id === store.getters.userInfo.id) ? '取消收藏' : '收藏' }} {{ item.collects.length }}
          </span>
            </div>
            <div class="share-item f-r a-c">
              <img class="share-icon" src="@/assets/zan_blue.png" alt="" />
              <span class="share-name" >
                {{ item.likes.find(el => el.user_id === store.getters.userInfo.id) ? '取消点赞' : '点赞' }}
                {{ item.likes.length }}
              </span>
            </div>
          </div>

          <div class="f-r a-c comment-item-box1">
            <div class="text1">全部评论</div>
            <div class="text2">共{{ item.comments.length }}条</div>
          </div>
          <div class="f-r a-c comment-item-box1" v-for="commentItem in (item.comments || [])">
            <div class="f-s">
              <el-avatar size="30" :src="commentItem.user.avatar || defaultAvatar"></el-avatar>
            </div>
            <div class="line1 f-g">
              <div class="text3">{{ commentItem.user.nickname }}【{{commentItem.user.typeName}}】：{{ commentItem.content }}</div>
              <div class="text3">{{ commentItem.create_time }}</div>
            </div>
          </div>
        </div>

      </div>
    </div>
    <el-pagination
        v-model:current-page="pageNo"
        v-model:page-size="pageSize"
        :page-sizes="[10, 50, 100, 200]"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="changeSize"
        @current-change="changePage"
    />
  </div>
</template>

<style lang="scss">
.post {
  overflow: auto;
  flex-grow: 1;
  .post-header {
    margin-bottom: 10px;
  }
}
.userCommunity-list {
  .el-card__body {
    background-color: #F3F3F3;
  }
}
.right-button {
  cursor: pointer;
  width: 80px;
  height: 30px;
  border-radius: 15px;
  opacity: 1;
  background: linear-gradient(270deg, #046BFF 0%, #5199FF 100%);
  text-align: center;
  line-height: 30px;
  font-family: PingFang SC;
  font-size: 14px;
  font-weight: normal;
  color: #FFFFFF;
}
.userCommunity-item {
  border-radius: 8px;
  background: #FFFFFF;
  padding: 18px;
  margin-bottom: 12px;
  &:last-of-type {
    margin-bottom: 0;
  }
  .userCommunity-item-comment {
    margin-top: 15px;
  }
  .back-title {
    cursor: pointer;

    font-family: PingFang SC;
    font-size: 16px;
    font-weight: normal;
    line-height: 16px;
    color: #91CAFE;
    display: flex;
    align-items: center;
    margin-bottom: 55px;
  }
  .comment-more {
    font-family: PingFang SC;
    font-size: 14px;
    font-weight: normal;
    line-height: 22px;
    color: #3D3D3D;
    text-align: center;
    display: flex;
    align-items: center;
    margin-top: 10px;
    cursor: pointer;
    .el-icon {
      margin-left: 10px;
    }
  }
  .comment-item-box1 {

    margin-top: 15px;
    width: 533px;
    .line1 {
      padding: 5px 0;
      margin-left: 10px;
      border-bottom: 1px solid #D8D8D8;
    }
    .text1 {
      font-family: PingFang SC;
      font-size: 14px;
      font-weight: normal;
      line-height: 18.98px;
      color: #0A6FFF;
      margin-right: 15px;
    }
    .text2 {
      font-family: PingFang SC;
      font-size: 12px;
      font-weight: normal;
      line-height: 18.98px;
      color: #666666;
    }
    .text3 {
      font-family: PingFang SC;
      font-size: 12px;
      font-weight: normal;
      line-height: 18.98px;
      color: #3D3D3D;
    }
  }
  .comment-button {
    width: 533px;
    text-align: right;
    margin-top: 10px;
  }
  .comment-input {
    /* 矩形 51 */
    width: 533px;
  }
  .share-list {
    margin-bottom: 33px;
  }
  .share-icon {
    width: 16px;
    height: 16px;
    cursor: pointer;

  }
  .share-name {
    font-family: PingFang SC;
    font-size: 12px;
    font-weight: normal;
    line-height: 12px;
    color: #808080;
    margin-left: 14px;
    cursor: pointer;
    margin-right: 80px;
  }
  .userCommunity-item-title {
    padding-left: 50px;
    font-family: PingFang SC;
    font-size: 16px;
    font-weight: normal;
    line-height: 16px;
    color: #000000;
    margin-bottom: 10px;
  }
  .userCommunity-item-desc {
    padding-left: 50px;
    font-family: PingFang SC;
    font-size: 15px;
    font-weight: normal;
    line-height: 28px;
    color: #3D3D3D;
  }
  .userCommunity-item-img {
    min-width: 160px;
    height: 160px;
    margin-left: 50px;
  }
  .user-name {
    font-family: PingFang SC;
    font-size: 16px;
    font-weight: normal;
    line-height: 18px;
    color: #333333;
    margin-left: 10px;
  }
  .create-time {
    font-family: PingFang SC;
    font-size: 14px;
    font-weight: normal;
    line-height: 16px;
    color: #939393;
  }
}
</style>